<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.11.0/axios.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-row {
            margin-bottom: 20px;
            &:last-child {
            margin-bottom: 0;
            }
        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="2">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="22">
                <div class="grid-content">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="标题">
                            <el-input v-model="searchForm.title" clearable placeholder="标题"></el-input>
                        </el-form-item>
                        <el-form-item label="作者">
                            <el-input v-model="searchForm.author" clearable placeholder="作者"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="findList">查询</el-button>
                        </el-form-item>

                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="20">
                <div class="grid-content">
                    <el-table
                            :data="easyList"
                            border
                            style="width: 100%"
                            v-loading="loading"
                            element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.8)">
                        <el-table-column
                                prop="id"
                                label="编号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="author"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="时间">
                            <template slot-scope="scope">
                                {{scope.row.createtime | datatostring}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="edit(scope.row.id)" icon="el-icon-edit" circle></el-button>
                                <el-button type="danger"  @click="del(scope.row.id)" icon="el-icon-delete" circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="20">
                <el-pagination
                        layout="sizes,total,prev, pager, next"
                        @size-change="findList"
                        @current-change="findList"
                        :total="total"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size.sync="pagesize">
                </el-pagination>
            </el-col>
            <el-col :span="2">
                <div class="grid-content"></div>
            </el-col>
        </el-row>
    </div>
</body>
<script>

    Vue.filter("datatostring",function (value) {
        return moment(value).format("yyyy-MM-DD")
    })

    new Vue({
        el:"#app",
        data:{
            searchForm:{},
            easyList:[],
            loading:true,
            total:0,
            currentPage:1,
            pagesize:10
        },
        created(){
           this.findList()
        },
        methods:{
            findList(){
                console.log(this.currentPage)
               axios.post(`easy/finall.do?startpage=${this.currentPage}&pagesize=${this.pagesize}`,this.searchForm).then((resp)=>{
                    this.easyList = resp.data.records
                    this.total = resp.data.total
                    this.loading = false
                }).catch((err)=>{console.log(err)})
            },
            edit(id){
                location.href=`edit.html?id=${id}`
            },
            del(id){
                axios.get(`easy/del.do?id=${id}`).then((resp)=>{
                    this.$message.info(resp.data.msg)
                    this.findList()
                }).catch((err)=>{console.log(err)})
            }
        }
    })
</script>
</html>